# Preact 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-preact" />

Preact 插件提供了对 Preact 的支持，插件内部集成了 JSX 编译、React aliasing 等功能。

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-preact -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginPreact } from '@rsbuild/plugin-preact';

export default {
  plugins: [pluginPreact()],
};
```

注册插件后，你可以直接进行 Preact 开发。

## 选项

### reactAliasesEnabled

是否将 `react`、`react-dom` 通过 alias 指向 `preact/compat`。

- **类型：** `boolean`
- **默认值：** `true`
- **示例：** 禁用别名。

```ts
pluginPreact({
  reactAliasesEnabled: false,
});
```

### prefreshEnabled

是否注入 [Prefresh](https://github.com/preactjs/prefresh) 用于 HMR。

- **类型：** `boolean`
- **默认值：** `true`
- **版本：** `>= v1.1.0`
- **示例：** 禁用 Prefresh。

```ts
pluginPreact({
  prefreshEnabled: false,
});
```

### include

指定要由 [@rspack/plugin-preact-refresh](https://github.com/rspack-contrib/rspack-plugin-preact-refresh) 插件处理的文件。这个值与 Rspack 中的 `rule.test` 选项相同。

- **类型：** [RuleSetCondition](https://rspack.rs/zh/config/module#condition)
- **默认值：** `/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/`
- **版本：** `>= v1.1.0`

```ts
pluginPreact({
  include: [/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/, /some-other-module/],
});
```

### exclude

排除 [@rspack/plugin-preact-refresh](https://github.com/rspack-contrib/rspack-plugin-preact-refresh) 插件处理的文件。这个值与 Rspack 中的 `rule.exclude` 选项相同。

- **类型：** [RuleSetCondition](https://rspack.rs/zh/config/module#condition)
- **默认值：** `/[\\/]node_modules[\\/]/`
- **版本：** `>= v1.1.0`

```ts
pluginPreact({
  exclude: [/[\\/]node_modules[\\/]/, /some-other-module/],
});
```
